Upcoming Changes

We’re going to approach this change in multiple stages through the remainder of this lesson.

Step 1: Review a Sample App
** Step 2:** Refactor the logic for the four activities to use Fragments
Step 3: Modify Main Activity so that it uses a ViewPager
Step 4: Add Tabs

Here's an overview of what we'll do at each step:

Step 1: Review a Sample App

First you’ll experiment with a sample app that contains a something called a ViewPager. You’ll see how a FragmentPagerAdapter will provide a different Fragment for each “page” that you swipe to. Then we’ll learn a little more about Fragments, to prepare you for the next coding step.

Above is example app called ViewPager. Each screen is a separate Fragment.

Step 2: Refactor the logic for the four activities to use Fragments

Next, you’re going to refactor the current Miwok app from the 4 activities (numbers, colors, family, phrases) into the 4 fragments. The user-facing app will look the same, but all the logic to display the list of words will be in the fragments instead of the activity files. Once the logic is inside fragments, we can move to the next step.

NumbersActivity will contain the NumbersFragment
FamilyActivity will contain the FamilyFragment
ColorsActivity will contain the ColorsFragment
PhrasesActivity will contain the PhrasesFragment

We will refactor the 4 word list activities to use fragments, but the final UI will appear the same to the user.

Step 3: Modify Main Activity so that it uses a ViewPager

A ViewPager allows you to swipe between different “pages” or screens. We’re going to modify the MainActivity so it contains a ViewPager with 4 pages, where each page is a Fragment. We can swipe between each Fragment to see a different list of words.

At this point, we’re removing the layout that had a button for each category. We will also delete the category activities (NumbersActivity, FamilyActivity, ColorsActivity, PhrasesActivity) because the app only has 1 activity now (MainActivity). You can tell that we’re in the MainActivity because the app bar says “Miwok” across all the screens.

We will remove the layout that had a button for each category. We will also delete the category activities and consolidate into a single MainActivity that contains fragments.

Step 4: Add Tabs

Lastly, once the ViewPager is working, we’ll add tabs across the top of the ViewPager, so you can tap to jump to a specific page.

The finished version of the app will have tabs across the top of the ViewPager, so you can tap to jump to a specific page.